<template>
  <div class="about">
    <div class="site">
      <div class="box1" v-for="(v, i) in getMysites" :key="i">
        <div class="top">
          <h3>&ensp;收货人：{{ v.real_name }}&emsp;{{ v.phone }}</h3>
        </div>
        <div class="count">
          &emsp;收货地址：{{ v.province }}{{ v.city }}{{ v.district
          }}{{ v.detail }}
        </div>
        <!-- <hr /> -->
        <div class="footer">
          &ensp;
          <div class="left">
            <van-checkbox v-model="checked">设为默认</van-checkbox>
          </div>
          <div class="right">
            <span><van-icon name="records" />编辑</span>&emsp;
            <span><van-icon name="delete-o" />删除</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <button><van-icon name="location-o" />添加新的地址</button>
    </div>
  </div>
</template>
<script>
// 获取api数据
import { getMysite } from "@/api/request";

export default {
  data() {
    return {
      // 接收数据
      getMysites: [],
      // 单选框
      checked: false,
    };
  },
  created() {
    // 获取地址数据
    getMysite().then((res) => {
      this.getMysites = res.data.data;
      console.log(this.getMysites);
    });
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box1 {
  width: 98%;
  margin-left: 1%;
  height: 100px;
  background: white;
  margin-top: 1%;
  float: left;
  .count {
    margin-top: 3%;
    font-size: 14px;
  }
  hr {
    margin-top: 10px;
  }
  .footer {
    display: flex;
    margin-top: 3%;
    border-top: 1px solid #ccc;
    .left {
      flex: 1;
      margin-top: 1.5%;
    }
    .right {
      margin-right: 2%;
      margin-top: 1.5%;

      //   span {
      //     margin-right: 2%;
      //   }
    }
  }
}
.bottom {
  width: 100%;
  background: white;
  position: fixed;
  height: 60px;
  bottom: 0;
  button {
    border: none;
    width: 90%;
    height: 40px;
    background: red;
    border-radius: 25px;
    margin-left: 5%;
    margin-top: 2.5%;
    color: white;
  }
}
</style> 